<template>
	<div style="height: 500px; width: 100vw">
		<div id="graph"></div>
	</div>
</template>

<script setup lang="tsx">
import { onMounted } from 'vue';
import { Graph } from '@antv/x6';
// import {}
const data = {
	// 节点
	nodes: [
		{
			id: '1',
			shape: 'er-rect',
			label: '学生',
			width: 150,
			height: 44,
			position: {
				x: 24,
				y: 150,
			},
			ports: [
				{
					id: '1-1',
					group: 'list',
					attrs: {
						portNameLabel: {
							text: 'ID',
						},
						portTypeLabel: {
							text: 'STRING',
						},
					},
				},
				{
					id: '1-2',
					group: 'list',
					attrs: {
						portNameLabel: {
							text: 'Name',
						},
						portTypeLabel: {
							text: 'STRING',
						},
					},
				},
				{
					id: '1-3',
					group: 'list',
					attrs: {
						portNameLabel: {
							text: 'Class',
						},
						portTypeLabel: {
							text: 'NUMBER',
						},
					},
				},
				{
					id: '1-4',
					group: 'list',
					attrs: {
						portNameLabel: {
							text: 'Gender',
						},
						portTypeLabel: {
							text: 'BOOLEAN',
						},
					},
				},
			],
		},
		{
			id: '2',
			shape: 'er-rect',
			label: '课程',
			width: 150,
			height: 44,
			position: {
				x: 250,
				y: 210,
			},
			ports: [
				{
					id: '2-1',
					group: 'list',
					attrs: {
						portNameLabel: {
							text: 'ID',
						},
						portTypeLabel: {
							text: 'STRING',
						},
					},
				},
				{
					id: '2-2',
					group: 'list',
					attrs: {
						portNameLabel: {
							text: 'Name',
						},
						portTypeLabel: {
							text: 'STRING',
						},
					},
				},
				{
					id: '2-3',
					group: 'list',
					attrs: {
						portNameLabel: {
							text: 'StudentID',
						},
						portTypeLabel: {
							text: 'STRING',
						},
					},
				},
				{
					id: '2-4',
					group: 'list',
					attrs: {
						portNameLabel: {
							text: 'TeacherID',
						},
						portTypeLabel: {
							text: 'STRING',
						},
					},
				},
				{
					id: '2-5',
					group: 'list',
					attrs: {
						portNameLabel: {
							text: 'Description',
						},
						portTypeLabel: {
							text: 'STRING',
						},
					},
				},
			],
		},
		{
			id: '3',
			shape: 'er-rect',
			label: '老师',
			width: 150,
			height: 44,
			position: {
				x: 480,
				y: 350,
			},
			ports: [
				{
					id: '3-1',
					group: 'list',
					attrs: {
						portNameLabel: {
							text: 'ID',
						},
						portTypeLabel: {
							text: 'STRING',
						},
					},
				},
				{
					id: '3-2',
					group: 'list',
					attrs: {
						portNameLabel: {
							text: 'Name',
						},
						portTypeLabel: {
							text: 'STRING',
						},
					},
				},
				{
					id: '3-3',
					group: 'list',
					attrs: {
						portNameLabel: {
							text: 'Age',
						},
						portTypeLabel: {
							text: 'NUMBER',
						},
					},
				},
			],
		},
	],
	// 边
	edges: [
		{
			id: '4',
			shape: 'edge',
			source: {
				cell: '1',
				port: '1-1',
			},
			target: {
				cell: '2',
				port: '2-3',
			},
			attrs: {
				line: {
					stroke: '#A2B1C3',
					strokeWidth: 2,
				},
			},
			zIndex: 0,
		},
		{
			id: '5',
			shape: 'edge',
			source: {
				cell: '3',
				port: '3-1',
			},
			target: {
				cell: '2',
				port: '2-4',
			},
			attrs: {
				line: {
					stroke: '#A2B1C3',
					strokeWidth: 2,
				},
			},
			zIndex: 0,
		},
	],
};

onMounted(() => {
	registerNode();

	const graph = new Graph({
		container: document.getElementById('graph')!,
		width: 1600,
		height: 600,
	});
	// graph.addNode({
	// 	x: 200,
	// 	y: 200,
	// 	shape: 'all-it',
	// 	label: '请求量\n平均处理时长\n告警数\n失败数\n健康度',
	// });
	graph.fromJSON(data);
	// graph.render();
});
// 自定义节点
function registerNode() {
	const LINE_HEIGHT = 24;
	const NODE_WIDTH = 150;

	Graph.registerPortLayout(
		'erPortPosition',
		(portsPositionArgs) => {
			return portsPositionArgs.map((_, index) => {
				// console.log('_', _);
				console.log('index', index);

				return {
					position: {
						x: 0,
						y: index * LINE_HEIGHT + 44,
					},
					angle: 0,
				};
			});
		},
		true
	);

	Graph.registerNode(
		'er-rect',
		{
			inherit: 'rect',
			markup: [
				{
					tagName: 'rect',
					selector: 'body',
				},
				{
					tagName: 'text',
					selector: 'label',
				},
			],
			attrs: {
				rect: {
					strokeWidth: 1,
					stroke: '#3A71A8;',
					fill: '#3A71A8',
					height: 100,
				},
				label: {
					fontWeight: 'bold',
					fill: '#ffffff',
					fontSize: 12,
					x: -55,
				},
			},
			ports: {
				groups: {
					list: {
						markup: [
							{
								tagName: 'rect',
								selector: 'portBody',
							},
							{
								tagName: 'text',
								selector: 'portNameLabel',
							},
							{
								tagName: 'text',
								selector: 'portTypeLabel',
							},
						],
						attrs: {
							portBody: {
								width: NODE_WIDTH,
								height: 24,
								strokeWidth: 1,
								stroke: '#5F95FF',
								fill: '#3A71A8',
								magnet: true,
							},
							portNameLabel: {
								ref: 'portBody',
								refX: 6,
								refY: 6,
								fontSize: 10,
								fill: '#fff',
							},
							portTypeLabel: {
								ref: 'portBody',
								refX: 95,
								refY: 6,
								fontSize: 10,
								fill: '#fff',
							},
						},
						position: 'erPortPosition',
					},
				},
			},
		},
		true
	);
}
</script>

<style lang="scss" scoped></style>
